.app-home{
    
    height: 100%;
    justify-content: space-between;
    header{
        flex: 4;
    }

    main{
        
        flex: 10;

        section:nth-child(1){
            flex: 3;

            .ranking{
                flex: 2;
                background-image: url(../imgs/index-card-rank.png);
                background-size: 110px;
                background-position: -12px 10px;
                background-color: #1592CC;

                p:nth-child(1){
                    top: 10px;
                    left: 12px;
                }

                p:nth-child(2){
                    right: 12px;
                    bottom: 6px;
                }
            }

            .punch{
                flex: 3;
                margin-left: 10px;
                

                background-image: url(../imgs/index-card-sum.png);
                background-size: 100px;
                background-position: 6px 10px;
                background-color: #7BCBF5;

                p:nth-child(1){
                    top: 10px;
                    left: 12px;
                }

                p:nth-child(2){
                    width: 100px;
                    right: 22px;
                    bottom: 20px;
                    border: 2px solid #005177;
                }
            }
        }

        section:nth-child(2){
            flex: 3;


            .exercise{
                flex: 1;
                
                margin-right: 10px;
                background-image: url(../imgs/index-card-data.png);
                background-size: 180px;
                
                p{
                    top: 10px;
                    left: 12px;
                }
            }

            .medal{
                flex: 1;
                
                background-image: url(../imgs/index-card-badge.png);
                background-size: 110px;
                background-position: 0 15px;
                background-color: #92BEE3;

                p:nth-child(1){
                    top: 10px;
                    left: 12px;
                }

                p:nth-child(2){
                    right: 14px;
                    bottom: 4px;

                   
                }
            }
        }

        section:nth-child(3){
            flex: 2;

            background-image: url(../imgs/index-swiper-bg2.jpg);
            background-size: 360px;
            background-position: 0 -35px;

            p{
                top: 10px;
                left: 12px;
            }
        }
        section:nth-child(4){
            flex: 2;

            background-image: url(../imgs/index-card-run.png);
            background-size: 360px;
            background-position: 0 -35px;

            p{
                top: 10px;
                left: 12px;
            }
        }
    }

    footer{
        width: 100%;
        flex: 2;
        
        
        text-align: center;
        bottom: 0px;
        

        div{
            width: 100%;
            height: 70px;
            position: fixed;
            bottom: 0px;
            justify-content: space-between;
            box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
            
            a{
                flex: 1;
                justify-content:center;
                color: rgba(16, 16, 16, 100);
                i{
                    font-size: 28px;
                    margin-bottom: 5px;
                }
                
            }
            .active{
                color: #4294FF;
            }
        }
    }
}